<template>
    
  <div>
    <div>{{msg}}</div>
    <!-- 利用v-model进行数据绑定 -->
    <input v-model="msg" />
  </div>

  <!-- Attribute绑定(v-bind) -->
  <div :person>{{ person.age }}</div>
  <!-- //   v-if判断语句 -->
<p v-if="person.age>18">{{person.name}}是成年人</p>
<!-- v-bind参数的语法(绑定网站) -->
<a :href="'https:www.baidu.com'">百度</a>
<!-- 点击事件@Click -->
 <button @click="click" :disabled="isDisplay">点击</button>
 <!-- 深层响应性 -->
  <div>
    <button @click="mutateDeeply">点击</button>
</div>
<!-- 代理对象reactive -->
<div>
    <button @click="state.count++">{{state.count}}</button>
</div>


  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
    <!-- computed的使用 -->
   <span>1{{BooksMessage}}</span>
   <!-- getter 和 setter 来创建可写属性 -->
    <div>
    <span>{{ fullName }}</span>
    </div>
</template>
<script setup>
import {ref,reactive,computed} from 'vue'

const state=reactive({count:0})
  const msg=ref("Hello World!")
  const person=ref({
    name:"张三",
    age:19
  })
  const obj=ref({
    nested:{count:0},
    arr:['foo','bar']
  })
  const isDisplay=ref(false)
  //vue3的自动解包
   const state1 = reactive({
  count: ref(0),  // 这是一个 ref
  name: 'Vue'
});
const author=reactive({
    name:'Tony',
    books:[
        'Vue1',
        'Vue2',
        'Vue3'
    ]
})
const firstName=ref('John')
  const lastName=ref('DOe')
  const fullName=computed({
    get(){
        return firstName.value+' '+lastName.value
    },
    // setter函数代表fullname的值发生变化,firstName与lastName的值也发生变化
    set(newValue){
        [firstName.value,lastName.value] = newValue.split(' ')
    }

  })
const BooksMessage=computed(()=>{
  return author.books.length > 0 ? 'Yes': 'No'
})
// 访问时，`count` 会自动解包，实际上就是 `state.count.value`
console.log(state1.count);  // 输出 0

  function click(){
    isDisplay.value=true
    
    alert("点击事件")
  }
  function mutateDeeply(){
    obj.value.nested.count++
    obj.value.arr.push('baz')
    console.log(state)
    fullName.value="Jane Tony"
    
   
  }

  


 

</script>
<style>

</style>